<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.事件修饰符</title>
		<style>
			*{
				margin-top: 30px;
			}
			.demo{
				padding: 15px;
				background-color: skyblue;
			}
			ul{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（掌握）；
						2.stop：阻止事件冒泡（掌握）；
						3.once：事件只触发一次（掌握）；
						4.capture：使用事件的捕获模式（了解）；
						5.self：只有event.target是当前操作的元素时才触发事件（了解）；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕（了解）；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>欢迎来到{{school}}学习</h1>

			<!-- prevent修饰符，阻止默认事件（掌握） -->
			<a :href="url" @click.prevent="showName">展示学校名</a>

			<!-- stop修饰符，阻止冒泡（掌握） -->
			<div @click="showName" class="demo">
				<!-- <button @click.stop="showName">展示学校名</button> -->
				<a :href="url" @click.stop.prevent.once="showName">展示学校名</a>
			</div>

			<!-- once修饰符，事件只触发一次（掌握） -->
			<button @click.once="showName">展示学校名（只能触发一次）</button>

			<!-- capture修饰符，在捕获阶段处理事件（了解） -->
			<div @click.capture="showWelcome(1)" class="demo">
				<button @click="showWelcome(2)">展示欢迎词</button>
			</div>

			<!-- self修饰符，只有event.target是当前操作的元素时才触发事件（了解） -->
			<div @click.self="showMsg" class="demo">
				<button @click="showMsg">展示消息</button>
			</div>

			<!-- passive修饰符：事件的默认行为立即执行，无需等待事件回调执行完毕（了解） -->
			<ul @wheel.passive="showRandom">
				<li>消息1</li>
				<li>消息2</li>
				<li>消息3</li>
				<li>消息4</li>
				<li>消息5</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				school:'尚硅谷',
				url:'http://www.atguigu.com'
			},
			methods:{
				showName(event){
					// event.preventDefault() //靠程序员亲自阻止默认事件
					// event.stopPropagation() //靠程序员亲自阻止冒泡
					alert(this.school)
				},
				showWelcome(n){
					console.log('欢迎来学习',n)
				},
				showMsg(event){
					console.log('atguigu',event.target)
				},
				showRandom(){
					for (let i = 0; i < 100000; i++) {
						console.log(Math.random())
					}
				}
			}
		})
	</script>
</html>